<template>
  <div class="follow-container">
    <!-- 用户列表 -->
    <div class="user-section">
      <h2 class="section-title">关注用户（{{ userList.length }}）</h2>
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>
      <template v-else>
        <div v-if="userList.length > 0" class="user-list">
          <user-card 
            v-for="user in userList"
            :key="user.userId"
            :user="{
              userId: user.userId,
              nickName: user.nickName,
              avatar: user.avatar,
              libraryCount: user.libraryCount
            }"
            @click="handleUserClick(user)"
            class="user-item"
          />
        </div>
        <el-empty v-else description="暂未关注任何用户" />
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import require from '../require'
import UserCard from './UserCard.vue'

const router = useRouter()

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 移除分页相关状态
const loading = ref(true)
const userList = ref([])

// 修改后的获取关注列表方法
const fetchFollowList = async () => {
  try {
    loading.value = true
    const res = await require.get('user/getAllFollows')
    
    userList.value = res.userList?.map(user => ({
      userId: user.userId,
      nickName: user.nickName,
      avatar: user.avatarUrl,
      libraryCount: user.libraryAmount
    })) || []
    
  } catch (error) {
    console.error('获取关注列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 移除 handlePageChange 方法
const handlePageChange = (page) => {
  currentPage.value = page
  fetchFollowList()
}

// 用户点击跳转
const handleUserClick = (user) => {
  router.push({
    name: 'UserProfile',
    query: { userId: user.userId }
  })
}

onMounted(() => {
  fetchFollowList()
})
</script>

<style scoped>
.follow-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.section-title {
  color: #303133;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e4e7ed;
}

.user-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 15px;
}

.loading-container {
  padding: 30px 0;
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.user-item {
  transition: all 0.3s ease;
  cursor: pointer;
}

.user-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
